import React from "react";

const Household = () => {
    const [householdList, setHouseholdList] = React.useState([])
    const [hasMore, setHasMore] = React.useState(true)
    const [page, setPage] = React.useState(1)
    const limit = 10
    let busid = React.Business.id??0

    React.useEffect(() => {
        loadMore()
    }, []); // 依赖数组为空意味着仅在组件挂载时调用一次
    // 返回
    const back = () => {
        React.navigate(-1)
    }
    // 下拉刷新
    const onRefresh = async () => {
        setPage(1)
        setHasMore(true)
        setHouseholdList([])
        loadMore()
    }
    // 上拉加载
    const loadMore = async () => {
        let result = await React.HTTP.post("/business/household", { busid, page, limit })
        if (result.code == 1) {
            setHasMore(true)
            setPage(page + 1)
            setHouseholdList(householdList.concat(result.data))
        } else {
            setHasMore(false)
            return false
        }
    }
    // 滑动面板
    const remove = async (id:number,e:any) => {
        if(e.key !== "delete") return false
        let result = await React.UI.Dialog.confirm({
            content: '确定要删除吗？',
        })
        if (result) {
            // 删除数据
            let delRes = await React.HTTP.post("/business/removeHousehold",{id,busid})
            if(delRes.code == 1){
                React.success(delRes.msg,()=>{
                    onRefresh()
                })
            }else{
                React.error(delRes.msg)
                return false
            }
        }
    }
    const rightActions = [
        {
            key: 'delete',
            text: '删除',
            color: 'danger',
        },
    ]
    // 编辑
    const edit = (id:number,e:any) => {
        React.navigate(`/business/Guest?id=${id}`)
    }


    return (
        <>
            <React.UI.NavBar onBack={back}>住户信息</React.UI.NavBar>
            <div style={{ textAlign: "center", }}>
                <React.Router.Link to={"/business/guest"}>去登记信息</React.Router.Link>
            </div>
            <React.UI.PullToRefresh onRefresh={onRefresh} touch-ation="auto">
                {
                    householdList.length ?
                        (householdList.map((item: any, index: any) => {
                            return (
                                <React.UI.SwipeAction
                                    key={item.id}
                                    rightActions={rightActions}
                                    onAction = {remove.bind(this,item.id)}
                                >
                                    <React.UI.Card onClick={edit.bind(this,item.id)} title={item.nickname} key={item.id}>
                                        {"性别:" + item.gender_text} {"手机号码:" + item.mobile}
                                    </React.UI.Card>
                                </React.UI.SwipeAction>
                            )
                        }))
                        :
                        (<React.UI.Empty description='暂无数据' />)
                }
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}

export default Household